import React from 'react'
import Logo from '../../component/logo/logo'
import {List, InputItem, Radio, WingBlank, WhiteSpace, Button} from 'antd-mobile'
import { Navigate } from 'react-router-dom'
import { connect } from 'react-redux'
import { register } from '../../redux/user.redux'
import imoocFrom from '../../component/imooc-form/imooc-form'
import withRouter from '../../component/withRouter'
@withRouter
@connect(
    state=> state.user,
    {register}
)
@imoocFrom
class Register extends React.Component{
    constructor(props) {
        super(props)
        // this.state = {
        //     user: '',
        //     pwd: '',
        //     repeatpwd: '',
        //     type: 'genius'  //or boss
        // }
        this.login = this.login.bind(this)
        this.handleRegister = this.handleRegister.bind(this)
    }
    login(){
        this.props.navigate('/login')
    }
    // handleChange(key, val) {
    //     this.setState({
    //         [key]: val
    //     })
    // }
    componentDidMount() {
        this.props.handleChange('type', 'genius')
    }
    handleRegister() {
        this.props.register(this.props.state)
    }
    render(h) {
        const RadioItem = Radio.RadioItem
        return (
            <div>
                {this.props.redirectTo? <Navigate to={this.props.redirectTo} />: null}
                <Logo></Logo>
                <h2>注册页</h2>
                <List>
                    {this.props.msg?<p className='error-msg'>{this.props.msg}</p>:null}
                    <InputItem onChange={v=>this.props.handleChange('user', v)}>用户：</InputItem>
                    <InputItem onChange={v=>this.props.handleChange('pwd', v)} type='password'>密码：</InputItem>
                    <InputItem onChange={v=>this.props.handleChange('repeatpwd', v)} type='password'>确认密码：</InputItem>
                <WhiteSpace />
                    <RadioItem onChange={v=>this.props.handleChange('type', 'genius')} checked={this.props.state.type==='genius'}>
                        牛人
                    </RadioItem>
                <WhiteSpace />
                    <RadioItem onChange={v=>this.props.handleChange('type', 'boss')} checked={this.props.state.type==='boss'}>
                        BOSS
                    </RadioItem>
                </List>
                <WhiteSpace />
                <WingBlank>
                    <Button type='primary' onClick={this.handleRegister}>提交注册</Button>
                    <WhiteSpace />
                    <Button onClick={this.login} type='primary'>跳转登录</Button>
                </WingBlank>
                <WhiteSpace />
            </div>
        )
    }
}

export default Register